<style scoped lang="scss">
    .header {
        cursor: pointer;
    }
    .actvitiForm {
        background: #f8f8f9;
        width: 450px;
        border: 1px solid #ddd;
        position: absolute;
        top: 20px;
        right: 10px;
        
    }
</style>
<template>
    <div v-show="visiable"
         class="dialogContainer"
         v-dialog-drag1
    >
        <div style="padding-left: 10px;padding-right: 10px;padding-bottom: 20px;"
             class="actvitiForm el-dialog1"
             :class="{isFold}">
            <div class="header el-dialog__header1"
                 style="border-bottom: 1px solid #ddd;padding-bottom: 10px;padding-top: 10px">
                <span v-if="isFold">编辑节点</span>
                <div style="position: absolute;right:10px;top:10px;cursor: pointer;">
                    <svgIcon :icon-class="'close'" @click.native="()=>{    visiable=false }"></svgIcon>
                </div>
            </div>
            <div style="        max-height: 450px; overflow-y: auto;" v-loading="pageLoading">
                <el-form :model="formData" :rules="rules" ref="form" v-show="isFold" label-width="auto"
                         style="padding-top: 20px;">
                    <el-form-item label="名称 " desc="" prop="nodeName" disabled="false">
                        <div>
                            <el-input size="small" placeholder="" v-model="formData.nodeName" clearable
                                      style="width: 220px;" />
                        </div>
                    </el-form-item>
                    <!--  <el-form-item label="父类 " desc="" prop="parentId" disabled="false">
                          <div>
                              <div style="color:#767676;">{{formData&&formData.parentNodeName}}({{formData.parentNodeId}})</div>
                          </div>
                      </el-form-item>-->
                    
                    
                    <el-form-item label="节点类型 " desc="" prop="confluenceType" size="small" disabled="false">
                        <el-select v-model="formData.confluenceType"
                        :disabled="isStartAndEnd(nodeDom)"
                        >
                            <el-option :value="1" label="正常"><span>正常</span></el-option>
                            <el-option :value="15" label="开始"><span>开始</span></el-option>
                            <el-option :value="20" label="结束"><span>结束</span></el-option>
                            <!--                        <el-option :value="5" label="合流"><span>合流</span></el-option>-->
                            <!--                        <el-option :value="10" label="虚拟"><span>虚拟</span></el-option>-->
                        </el-select>
                    </el-form-item>
                    
                    
                    <template v-if="formData.confluenceType==1">
                        <el-form-item label="业务状态 " desc="" prop="bpmState" disabled="false">
                            <dicSelect :code="dic.develop.develop_state" size="small"
                                       v-model="formData.bpmState" />
                        </el-form-item>
                        
                        <el-form-item label="默认处理部门 " desc="" prop="departId" disabled="false">
                            <!-- `depart_type` tinyint NOT NULL COMMENT '默认处理部门类型  1真实组织架构  5虚拟组织架构', -->
                            <div style="display:flex;">
                                <el-select v-model="formData.departType" style="width:88px"
                                           @change="()=>{
                            formData.departId=''
                            formData.departName=''
                            formData.departIdPath=''
                            formData.currentUserId=''
                            formData.currentUserName=''
                        }"
                                >
                                    <el-option :value="1" label="真实">真实</el-option>
                                    <el-option :value="5" label="虚拟">虚拟</el-option>
                                </el-select>
                                <!-- 虚拟 -->
                                <template v-if="true">
                                    <template v-if="formData.departType==5">
                                        <departSelectV v-model="formData.departId"
                                                       :text.sync="formData.departName"
                                                       style="width:120px;margin-left:5px;"
                                                       placeholder="选中虚拟部门"
                                                       @data="data=>{
              var classIdPath=`${data.parentIdPath},${data.id}`
              formData.departIdPath=classIdPath
            }"
                                        ></departSelectV>
                                    </template>
                                    <!--正式-->
                                    <template v-else-if="formData.departType==1">
                                        <departSelect v-model="formData.departId"
                                                      :text.sync="formData.departName"
                                                      placeholder="选中真实部门"
                                                      style="width:120px;margin-left:5px;"
                                                      @data="data=>{
                                                  
                                              var classIdPath=`${data&&data.parentIdPath},${data&&data.id}`
                                              formData.departIdPath=classIdPath
            }"
                                        ></departSelect>
                                    </template>
                                </template>
                            </div>
                        
                        
                        </el-form-item>
                        
                        <el-form-item label="默认处理人 " desc="" prop="currentUserName" disabled="false">
                            <div v-if="!formData.departId">请先选择部门</div>
                            <template v-else>
                                <template v-if="formData.departType==5">
                                    <!--选中-->
                                    <hrmUserSelect
                                            :userId.sync="formData.currentUserId"
                                            :userName.sync="formData.currentUserName"
                                            clearable style="width: 120px;"
                                            :placeholder="$attrs['placeholder']||'虚拟用户'"
                                    ></hrmUserSelect>
                                </template>
                                <template v-if="formData.departType==1">
                                    <!--选中-->
                                    <realUserSelect
                                            :placeholder="$attrs['placeholder']||'真实用户'"
                                            :userId.sync="formData.currentUserId"
                                            :userName.sync="formData.currentUserName"
                                            clearable style="width: 120px;"
                                            :params="{departId:formData.departId}"
                                    ></realUserSelect>
                                </template>
                            </template>
                        
                        </el-form-item>
                        <el-form-item label="管理节点 " desc="" prop="manageType" disabled="false">
                            <el-select v-model="formData.manageType" style="width: 120px;">
                                <el-option :value="1" label="非管理"></el-option>
                                <el-option :value="5" label="管理"></el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                    
                    <div style="margin-top:10px;">
                        <div>
                            <bpmPipelineHandleList ref="bpmPipelineHandleListDom"></bpmPipelineHandleList>
                        </div>
                    
                    </div>
                
                
                </el-form>
            </div>
            <div style="border-top:1px solid #ddd;padding-top:10px;" class="footer">
                <div>
                    <el-button type="primary" size="small" @click="submitByDialog">保存</el-button>
                </div>
            </div>
        </div>
    
    </div>

</template>
<script>
  
  
  import { clearZero } from '@/utils';
  
  const rules = {
    nodeName: [{ required: true, trigger: 'blur' }],
  };
  import { alertFail, alertSuccess } from '@base/utils';
  import svgIcon from '@codegenarate/svg-icon';
  import axios from 'axios';
  import dic from '@/utils/dicContant.js';
  import { Node as BaseNode } from '@antv/x6';
  
  import { fillData } from '@/utils/index.js';
  import dialogDrag from '@/directs/dialogDrag.ts';
  
  
  import * as departApi from '@/apis/depart.api.js';
  import * as departvApi from '@/apis/departv.api.js';
  import * as bpnmNodeApi from '@/apis/bpnmNode.api.js';
  import { isStartAndEnd } from '@/views/bnpmList/bnpm/bizUtils';
  
  export default {
    data() {
      return {
        isStartAndEnd,
        visiable: true,
        isFold: true,
        dic,
        rules,
        formData: {
          departId: '',
          departType: '',
          departName: '',
          nodeName: '',
          parentNodeName: '',
          parentNodeId: '',
          confluenceType: undefined,
          currentUserId: '',
          currentUserName: '',
          bpmId: '',
          id: '',
          'nodeCode': '',
          'parentNodeIdPath': '',
          'deep': '',
          'confluenceId': '',
          
          'departIdPath': '',
          
          'useTime': '',
          
          'bpmState': '',
          
          'manageType': '',
          
          'viewType': '',
          
          'makeUserType': '',
          
          'findType': '',
          
          'findUserType': '',
          
          'state': '',
          
          'remarks': '',
          
          'tenantType': '',
          
          'tenantId': '',
          
          'delState': '',
          
          'addUser': '',
          
          'addUserId': '',
          
          'addTime': '',
          
          'editUser': '',
          
          'editUserId': '',
          
          'lastEditTime': '',
          
          'serverNumber': '',
          handleList: [],
          
        },
        nodeDom: undefined,
        pageLoading: false,
      };
    },
    directives: {
      dialogDrag1: dialogDrag,
    },
    components: {
      svgIcon: () => import('@codegenarate/svg-icon'),
      dicSelect: () => import('@/components/dicselect.vue'),
      departSelectV: () => import('@/components/departSelectV.vue'),
      departSelect: () => import('@/components/departSelect.vue'),
      hrmUserSelect: () => import('@/components/hrmUserSelect.vue'),
      realUserSelect: () => import('@/components/realUserSelect.vue'),
      bpmPipelineHandleList: () => import('@/forms/actvitiForm/bpmPipelineHandle/list.vue'),
    },
    props: {
      node: { type: [BaseNode] },
    },
    watch: {
      '$props.node'(datas) {
      
      },
    },
    methods: {
      triggerLeft() {
        var self = this;
        
        this.isFold = !this.isFold;
      },
      
      async initByDialog(_data) {
        var self = this;
        this.pageLoading = true;
        
        this.visiable = true;
        this.nodeDom = _data && _data.node;
        //获取一次节点信息
        var nodeId = _data.data && _data.data.id;
        var newData=_data && _data.data
        if (nodeId) {
          var result = await bpnmNodeApi.getItem(nodeId);
           newData = {
            ..._data && _data.data,
            ...result && result.data,
          };
        }
        fillData(this.formData, newData);
        console.log('业务节点数据数据', newData);
        //设置 默认0的为空
        clearZero(this.formData);
        //设置默认
        if (!this.formData.confluenceType) {
          this.formData.confluenceType = 1;
        }
        //部门名称
        if (this.formData.departId && this.formData.departType == 1) {
          var result = await departApi.getItem(this.formData.departId);
          this.formData.departName = result && result.data.name;
        } else if (this.formData.departId && this.formData.departType == 5/*虚拟*/) {
          var result = await departvApi.getItem(this.formData.departId);
          this.formData.departName = result && result.data.name;
        }
        
        if (!this.formData.manageType) {
          this.formData.manageType = 1;
        }
        this.pageLoading = false;
        
        
        //现实  执行器列表
        setTimeout(() => {
          this.$refs['bpmPipelineHandleListDom'].initByDialog({
            bpmId: this.formData.bpmId,
            bpmNodeId: this.formData.bpmNodeId || this.formData.id,
            handleList: this.formData.handleList || [],
          });
        }, 300);
        
        
        //处理父类  //获取父类数据
        
        /*   const parentData = await axios.get('/api1/mesBpmPipeline/getbyid', {
             params: {
               id: this.formData.parentNodeId,
             },
           }).then(res => res.data).then(res => res.data);
           this.formData.parentNodeId = parentData && parentData.id;
           this.formData.parentNodeName = parentData && parentData.nodeName;*/
        
      },
      getNode(nodeId) {
      
      },
      propmiseValidate() {
        return new Promise(resolve => {
          this.$refs['form'].validate(isyes => {
            resolve(isyes);
          });
        });
      },
      
      async submitByDialog() {
        var self = this;
        var isyes = await this.propmiseValidate();
        if (!isyes) {
          return { success: false };
        }
        var nodeName = this.formData.nodeName;
        if (!nodeName) {
          alertFail('节点名称不能为空');
          return { success: false };
        }
        
        this.nodeDom.label = nodeName;
        this.nodeDom.updateData(this.formData);
        alertSuccess('保存成功');
        //修改数据库
        var result = await bpnmNodeApi.update(this.formData).then(res => res.data);
        return result;
      },
      
    },
  };
</script>
